<template>
<div class="recycle-express-delivery views-container">
    <div class="wlm-table">
        <div class="warning">
            <div class="flex-row flex-justify-b flex-align-c">
                <div>
                    <p>快递发货回收站</p>
                </div>
            </div>
        </div>
        <!-- 列表 -->
        <template v-if="hasTableData">
          <div  v-for="(item, index) in tableFormatData.listTable.tableData" :key="index" style="margin-bottom:20px;">
            <div class="delivery-table-header flex-row flex-align-c flex-justify-b">
                <div>
                    <span>模板名称：{{item.name}} &nbsp;</span>
                    <span class="orders-gray"> &nbsp;使用中的商品：0个 最后编辑时间：2019-01-23 15:03:29</span>
                </div>
                <div>
                    <!-- <el-button type="text"  @click="$router.push({path:'/orders/expressDeliveryAdd', query:{id:item.id}})">编辑</el-button>
                    <el-button type="text"  @click="copyPrevEvt(item.id)">复制</el-button>
                    <el-button type="text"  @click="delPrevEvt(item.id)">删除</el-button> -->
                    <el-button type="text" @click="changeTableItem({ids:[item.id],type:'delivery_template'},tableFormatData.listTable.change.restore)">恢复</el-button>
                    <el-button type="text" @click="delTableItem(item.id)">删除</el-button>
                </div>
            </div>
            <div class="wlm-table-content">
                <el-table :ref="tableFormatData.listTable.key" :border="true" :data="[item]" @selection-change="handleSelectionChange" style="width: 100%">
                    <el-table-column prop="date" label="计费方式" >
                        <template slot-scope="scope">
                            <span>{{methodType[scope.row.type]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="配送范围" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{item.cities}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="首件(个)" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{item.num}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="运费(元)" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{`￥${item.money}`}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="date" label="续件(个)" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{item.numex}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="运费(元)" >
                        <template v-if="scope.row.region" slot-scope="scope">
                            <p v-for="(item, index) in scope.row.region" :key="index">
                                {{`￥${item.moneyex}`}}
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="pagination-content flex-row flex-justify-b flex-align-c">
            <el-row class="pagination-btns">
                <!-- <el-checkbox class="check-all"  true-label="1" false-label="0" v-model="tableFormatData.listTable.files.checkall" @change="toggleSelection">全部</el-checkbox>
                <el-button class="right-8" :disabled="isGroup" size="mini" @click="delTableList">删除</el-button> -->
            </el-row>
            <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.listTable.pagination.page" :page-sizes="tableFormatData.listTable.pagination.pagesizes" :page-size.sync="tableFormatData.listTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.listTable.pagination.total : 0">
            </el-pagination>
        </div>
        </template>
        <div class="no-tabledata" v-if="isTableFormatGetEnd && !hasTableData" v-cloak>
          <svg-icon icon-class="notabledata" />
        </div>
    </div>
    <!--  -->
</div>
</template>

<script>
import {
  getDelDeliveryTemplateList,
  recoveryDeletedInfo,
  deleteThoroughlyInfo
} from '@/api/recycle'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'RecycleExpressDelivery',
  components: {

  },
  computed: {
    hasTableData() {
      return this.tableFormatData.listTable.tableData.length > 0
    }
  },
  filters: {

  },
  data() {
    return {
      methodType: {
        0: '按件计费',
        1: '按重计费'
      },
      delivery: { status: '20', freight_rule: '10', key: 'logistics' },
      freight_rule: '10',
      tableFormatData: {
        current: 'listTable',
        listTable: {
          key: 'listTable',
          api: {
            getList: getDelDeliveryTemplateList,
            delList: deleteThoroughlyInfo,
            msgConfig: {
              del: {
                type: 'warning',
                msg: '此操作会删除运费模板的所有数据，名下所有如有正在交易的订单、金额，删除后所产生的纠纷由服务商自身承担 如要删除请慎重操作！！'
              }
            }
          },
          tableData: [],
          files: {
            ids: [],
            id: '',
            checkall: '0',
            Recycle: '1',
            type: 'delivery_template'
          },
          change: {
            restore: {
              name: '恢复',
              key: 'restore',
              api: recoveryDeletedInfo
            }
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.recycle-express-delivery {
    /deep/ .el-table__header thead.has-gutter tr th {
        background-color: #ffffff;
    }

    .delivery-table-header {
        background: #f2f2f2;
        padding: 10px 24px;
    }
    .no-tabledata{
      font-size: 28em;
      text-align: center;
      /depp/ #icon-notabledata{
        fill: #409EFF !important
      }
    }
}
</style>
